<template>
    <span :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}'>
        <a-date-picker class="edit-content" v-if="isEdit" :locale="locale" v-model='inpValue' :format="dateFormat" 
            :allowClear='false' :disabled-date="disabledDate"  @change='dateChange'/>
        <template v-else>
            <a-date-picker v-if="editAble || isAddData" ref='ref_date' :locale="locale" :open='(editAble && !isAddData) || addClickFlag'
                :format="dateFormat" :allowClear='false' :disabled-date="disabledDate" @change='dateChange' @openChange='openChangeHandler'/>
            <span v-else  @click="showDate">
                {{ data[word] | timeFormat(dateFormat)}}
                <!-- <img v-if='inpValue != ""' src="@/assets/img/planComponents/icon_date.svg" class="icon-date"> -->
                <img v-if='this.isChild == true && inpValue != ""' src="@/assets/img/planComponents/icon_date.svg" class="icon-date">
            </span>
        </template>
    </span>
</template>
<script>
import moment from 'moment';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import mix from '../js/mainTable'
import { timeFormat } from '@/utils/util.js'
import { mapGetters } from 'vuex'
export default {
    mixins:[mix],
    data() {
        return {
            locale,
            dateFormat: 'YYYY-MM-DD',
            workTimeOfDay: 24,
            addClickFlag: false,
        }
    },
    computed: {
        ...mapGetters({
            editColumns: 'getEditColumns',
        }),
        isAddData() {
            return this.data.addNode != undefined && this.data.addNode 
                && this.editColumns.includes(this.columnInfo.dataIndex)
        }
    },
    methods: {
        showDate() {
            console.log(this.isChild);
            if (this.columnInfo.edit && this.isChild && this.data.actionPerssion && this.statePermission &&
                (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
                this.editAble = true
                this.$nextTick(() => {
                    this.$refs.ref_date.focus();
                })
            }
        },
        dateChange (moment,date) {
            if (this.isEdit)
                this.$emit('update',date)
            else{
                if(!this.isAddData)
                    this.editAble = false
                else{
                    this.$store.state.planTable.stopPropagation = true;
                    this.addClickFlag = false;
                }
                if (date != this.data[this.word])
                    this.$emit('update',date)
            }
        },
        //当关闭日期弹出框时,隐藏输入框，当要弹出日期选择框且数据为新增展示弹出框
        openChangeHandler(flag) {
            if(!flag) {
                this.editAble = false
                this.addClickFlag = false
            }else if (this.isAddData) {
                this.addClickFlag = true
            }
        },
        disabledDate(current) {
            if (this.word == 'targetEndDate') {
                const start = new Date(timeFormat(this.data.targetStartDate,'YYYY-MM-DD'))
                const end = new Date(timeFormat(current,'YYYY-MM-DD'))
                return current && (end.getTime() - start.getTime()) < 0
            }
        },
    }
}
</script>
<style scoped>
.edit-content {
    width: 100%;
}
.icon-date {
    margin-left: 5px;
}
</style>